---
title: Tooltip | gluestack-ui | Installation, Usage, and API

description: Easily provide hints or display details for users, enhancing usability and clarity.

pageTitle: Tooltip

pageDescription: Easily provide hints or display details for users, enhancing usability and clarity.

showHeader: true
---

import { Meta } from '@storybook/addon-docs';

<Meta title="with-nativewind/Components/Overlay/Tooltip" />

import {
  Tooltip,
  TooltipContent,
  TooltipText,
  Button,
  ButtonText,
  Avatar,
  AvatarGroup,
  AvatarFallbackText,
  HStack,
  Box,
  Heading,
  EditIcon,
  Center,
  VStack,
  Icon
} from '../../core-components/nativewind';

import { transformedCode } from '../../utils';

import {
  AppProvider,
  CodePreview,
  Table,
  TableContainer,
  Text,
  InlineCode,
  CollapsibleCode,
  Tabs
} from '@gluestack/design-system';
import Wrapper from '../../core-components/nativewind/Wrapper';
import { Command } from 'lucide-react-native';
import AnatomyImage from '../../extra-components/nativewind/AnatomyImage';

This is an illustration of **Tooltip** component.

<>
  <CodePreview
    showComponentRenderer={true}
    showArgsController={true}
    metaData={{
      code: `
        <Tooltip
          {...props}
          trigger={(triggerProps) => {
            return (
              <Button className='p-4' {...triggerProps}>
                <ButtonText>Hover on me!</ButtonText>
              </Button>
            );
          }}
        >
          <TooltipContent>
           <TooltipText>Tooltip</TooltipText>
          </TooltipContent>
        </Tooltip>
      `,
      transformCode: (code) => {
        return transformedCode(code);
      },
      scope: {
        Wrapper,
        Tooltip,
        TooltipContent,
        TooltipText,
        Center,
        Button,
        ButtonText,
      },
      argsType: {
        placement: {
          control: 'select',
          options: [
            'top left',
            'top',
            'top right',
            'left top',
            'left',
            'left bottom',
            'bottom left',
            'bottom',
            'bottom right',
            'right top',
            'right',
            'right bottom',
          ],
          default: 'top',
        },
      },
    }}
  />
</>

<br />

## Installation

<Tabs value="cli" type="section">
<Tabs.TabList>
      <Tabs.Tab value="cli">
        <Tabs.TabTitle>CLI</Tabs.TabTitle>
      </Tabs.Tab>
     <Tabs.Tab value="manual">
        <Tabs.TabTitle>Manual</Tabs.TabTitle>
     </Tabs.Tab>
  </Tabs.TabList>
  <Tabs.TabPanels>
    <Tabs.TabPanel value="cli">
<>

### Run the following command:
  ```bash
  npx gluestack-ui add tooltip
  ```
</>
    </Tabs.TabPanel>
    <Tabs.TabPanel value="manual"> 
<>

### Step 1: Install the following dependencies:

```bash
npm i @gluestack-ui/tooltip @legendapp/motion
```
> Note: At present, we have integrated the `@legendapp/motion` for animation. You have the option to remove this and implement your own custom animation wrapper.

### Step 2: Copy and paste the following code into your project.

<CollapsibleCode>

```jsx 
%%-- File: core-components/nativewind/tooltip/index.tsx --%% 
```

</CollapsibleCode>

### Step 3: Update the import paths to match your project setup.
</>
    </Tabs.TabPanel>
  </Tabs.TabPanels>
</Tabs>

## API Reference

To use this component in your project, include the following import statement in your file.

```jsx
import { Tooltip } from '@/components/ui/tooltip';
```

<AnatomyImage mobileUrl='https://i.imgur.com/ORGCmyK.png' webUrl='https://i.imgur.com/O8BeXgi.png' classNameStyle='aspect-[513/242] md:aspect-[736/170]' />

```jsx
export default () => (
  <Tooltip>
    <TooltipContent>
      <TooltipText />
    </TooltipContent>
  </Tooltip>
);
```
### Component Props

This section provides a comprehensive reference list for the component props, detailing descriptions, properties, types, and default behavior for easy project integration.

#### Tooltip

It inherits all the properties of React Native's [View](https://reactnative.dev/docs/view) component.

<>
  <TableContainer>
    <Table>
      <Table.THead>
        <Table.TR>
          <Table.TH>
            <Table.TText>Prop</Table.TText>
          </Table.TH>
          <Table.TH>
            <Table.TText>Type</Table.TText>
          </Table.TH>
          <Table.TH>
            <Table.TText>Default</Table.TText>
          </Table.TH>
          <Table.TH>
            <Table.TText>Description</Table.TText>
          </Table.TH>
        </Table.TR>
      </Table.THead>
      <Table.TBody>
        <Table.TR>
          <Table.TD>
            <Table.TText>
              <InlineCode>isOpen</InlineCode>
            </Table.TText>
          </Table.TD>
          <Table.TD>
            <Table.TText>boolean</Table.TText>
          </Table.TD>
          <Table.TD>
            <Table.TText>false</Table.TText>
          </Table.TD>
          <Table.TD>
            <Table.TText>{`Whether the tooltip is opened. Useful for controlling the open state.`}</Table.TText>
          </Table.TD>
        </Table.TR>
        <Table.TR>
          <Table.TD>
            <Table.TText>
              <InlineCode>isDisabled</InlineCode>
            </Table.TText>
          </Table.TD>
          <Table.TD>
            <Table.TText>boolean</Table.TText>
          </Table.TD>
          <Table.TD>
            <Table.TText>false</Table.TText>
          </Table.TD>
          <Table.TD>
            <Table.TText>{`Whether the tooltip is disabled.`}</Table.TText>
          </Table.TD>
        </Table.TR>
        <Table.TR>
          <Table.TD>
            <Table.TText>
              <InlineCode>defaultIsOpen</InlineCode>
            </Table.TText>
          </Table.TD>
          <Table.TD>
            <Table.TText>boolean</Table.TText>
          </Table.TD>
          <Table.TD>
            <Table.TText>false</Table.TText>
          </Table.TD>
          <Table.TD>
            <Table.TText>{`If true, the popover will be opened by default.`}</Table.TText>
          </Table.TD>
        </Table.TR>
        <Table.TR>
          <Table.TD>
            <Table.TText>
              <InlineCode>onOpen</InlineCode>
            </Table.TText>
          </Table.TD>
          <Table.TD>
            <Table.TText>{'() => void'}</Table.TText>
          </Table.TD>
          <Table.TD>
            <Table.TText>true</Table.TText>
          </Table.TD>
          <Table.TD>
            <Table.TText>{`This function will be invoked when the tooltip is opened.`}</Table.TText>
          </Table.TD>
        </Table.TR>
        <Table.TR>
          <Table.TD>
            <Table.TText>
              <InlineCode>onClose</InlineCode>
            </Table.TText>
          </Table.TD>
          <Table.TD>
            <Table.TText>{'() => void'}</Table.TText>
          </Table.TD>
          <Table.TD>
            <Table.TText>-</Table.TText>
          </Table.TD>
          <Table.TD>
            <Table.TText>{`This function will be invoked when tooltip is closed. It will also be called when the user attempts to close the tooltip via Escape key or backdrop press.`}</Table.TText>
          </Table.TD>
        </Table.TR>
        <Table.TR>
          <Table.TD>
            <Table.TText>
              <InlineCode>openDelay</InlineCode>
            </Table.TText>
          </Table.TD>
          <Table.TD>
            <Table.TText>{'number'}</Table.TText>
          </Table.TD>
          <Table.TD>
            <Table.TText>0</Table.TText>
          </Table.TD>
          <Table.TD>
            <Table.TText>{`Duration in ms to wait till displaying the tooltip.`}</Table.TText>
          </Table.TD>
        </Table.TR>
        <Table.TR>
          <Table.TD>
            <Table.TText>
              <InlineCode>closeDelay</InlineCode>
            </Table.TText>
          </Table.TD>
          <Table.TD>
            <Table.TText>{'number'}</Table.TText>
          </Table.TD>
          <Table.TD>
            <Table.TText>0</Table.TText>
          </Table.TD>
          <Table.TD>
            <Table.TText>{`Duration in ms to wait till hiding the tooltip.`}</Table.TText>
          </Table.TD>
        </Table.TR>
        <Table.TR>
          <Table.TD>
            <Table.TText>
              <InlineCode>placement</InlineCode>
            </Table.TText>
          </Table.TD>
          <Table.TD>
            <Table.TText>{`"bottom" | "top" | "right" | "left" | "top left" | "top right" | "bottom left" | "bottom right" | "right top" | "right bottom" | "left top" | "left bottom"`}</Table.TText>
          </Table.TD>
          <Table.TD>
            <Table.TText>bottom left</Table.TText>
          </Table.TD>
          <Table.TD>
            <Table.TText>{`Tooltip placement`}</Table.TText>
          </Table.TD>
        </Table.TR>
        <Table.TR>
          <Table.TD>
            <Table.TText>
              <InlineCode>children</InlineCode>
            </Table.TText>
          </Table.TD>
          <Table.TD>
            <Table.TText>any</Table.TText>
          </Table.TD>
          <Table.TD>
            <Table.TText>-</Table.TText>
          </Table.TD>
          <Table.TD>
            <Table.TText>
              The content to display inside the tooltip.
            </Table.TText>
          </Table.TD>
        </Table.TR>
        <Table.TR>
          <Table.TD>
            <Table.TText>
              <InlineCode>closeOnClick</InlineCode>
            </Table.TText>
          </Table.TD>
          <Table.TD>
            <Table.TText>boolean</Table.TText>
          </Table.TD>
          <Table.TD>
            <Table.TText>true</Table.TText>
          </Table.TD>
          <Table.TD>
            <Table.TText>
              Whether tooltip should be closed on Trigger click.
            </Table.TText>
          </Table.TD>
        </Table.TR>
        <Table.TR>
          <Table.TD>
            <Table.TText>
              <InlineCode>trigger</InlineCode>
            </Table.TText>
          </Table.TD>
          <Table.TD>
            <Table.TText>{`() => any`}</Table.TText>
          </Table.TD>
          <Table.TD>
            <Table.TText>-</Table.TText>
          </Table.TD>
          <Table.TD>
            <Table.TText>{`Function that returns a React Element. This element will be used as a Trigger for the tooltip.`}</Table.TText>
          </Table.TD>
        </Table.TR>
        <Table.TR>
          <Table.TD>
            <Table.TText>
              <InlineCode>offset</InlineCode>
            </Table.TText>
          </Table.TD>
          <Table.TD>
            <Table.TText>number</Table.TText>
          </Table.TD>
          <Table.TD>
            <Table.TText>10</Table.TText>
          </Table.TD>
          <Table.TD>
            <Table.TText>
              Distance between the trigger and the tooltip.
            </Table.TText>
          </Table.TD>
        </Table.TR>
        <Table.TR>
          <Table.TD>
            <Table.TText>
              <InlineCode>crossOffset</InlineCode>
            </Table.TText>
          </Table.TD>
          <Table.TD>
            <Table.TText>number</Table.TText>
          </Table.TD>
          <Table.TD>
            <Table.TText>-</Table.TText>
          </Table.TD>
          <Table.TD>
            <Table.TText>
              The additional offset applied along the cross axis between the
              element and its trigger element.
            </Table.TText>
          </Table.TD>
        </Table.TR>
        <Table.TR>
          <Table.TD>
            <Table.TText>
              <InlineCode>shouldOverlapWithTrigger</InlineCode>
            </Table.TText>
          </Table.TD>
          <Table.TD>
            <Table.TText>boolean</Table.TText>
          </Table.TD>
          <Table.TD>
            <Table.TText>false</Table.TText>
          </Table.TD>
          <Table.TD>
            <Table.TText>
              Determines whether tooltip content should overlap with the
              trigger.
            </Table.TText>
          </Table.TD>
        </Table.TR>
        <Table.TR>
          <Table.TD>
            <Table.TText>
              <InlineCode>shouldFlip</InlineCode>
            </Table.TText>
          </Table.TD>
          <Table.TD>
            <Table.TText>boolean</Table.TText>
          </Table.TD>
          <Table.TD>
            <Table.TText>true</Table.TText>
          </Table.TD>
          <Table.TD>
            <Table.TText>
              Whether the element should flip its orientation (e.g. top to
              bottom or left to right) when there is insufficient room for it to
              render completely.
            </Table.TText>
          </Table.TD>
        </Table.TR>
        <Table.TR>
          <Table.TD>
            <Table.TText>
              <InlineCode>closeOnOverlayClick</InlineCode>
            </Table.TText>
          </Table.TD>
          <Table.TD>
            <Table.TText>boolean</Table.TText>
          </Table.TD>
          <Table.TD>
            <Table.TText>true</Table.TText>
          </Table.TD>
          <Table.TD>
            <Table.TText>{`Closes tooltip when clicked outside.`}</Table.TText>
          </Table.TD>
        </Table.TR>
      </Table.TBody>
    </Table>
  </TableContainer>
</>

#### TooltipText

Contains all text related layout style props and actions. It inherits all the properties of React Native's Text component.

#### TooltipContent

Contains all backdrop related layout style props and actions. It inherits all the properties of React Native's [View](https://reactnative.dev/docs/view) component.

### Accessibility

We have outlined the various features that ensure the Tooltip component is accessible to all users, including those with disabilities. These features help ensure that your application is inclusive and meets accessibility standards. It adheres to the [ WAI-ARIA design pattern](https://www.w3.org/WAI/ARIA/apg/patterns/tooltip/).

### Examples

#### Tooltip with Heading

A tooltip component with an avatar is a user interface element that displays a small pop-up box of additional information when the user hovers over or interacts with an avatar or an icon.

<AppProvider>
  <CodePreview
    showComponentRenderer={true}
    showArgsController={false}
    metaData={{
      code: `
       function App(){
          return (
            <Box className="justify-center h-96">
              <AvatarGroup className="flex-row">
                <Tooltip
                  placement="top"
                  trigger={(triggerProps) => {
                    return (
                      <Avatar
                        size="lg"
                        {...triggerProps}
                        className="border-outline-0 border-2 bg-primary-600"
                      >
                        <AvatarFallbackText>+ 3</AvatarFallbackText>
                      </Avatar>
                    )
                  }}
                >
                  <TooltipContent
                    className="p-4 rounded-md max-w-72 bg-background-50"
                  >
                    <VStack space='md' className="rounded-lg">
                      <Heading size="sm">View all members of this channel</Heading>
                      <Center>
                        <Text className="font-sm">Includes John, Sarah, Mike, Emily</Text>
                        <Text className="font-sm">and David</Text>
                      </Center>
                    </VStack>
                  </TooltipContent>
                </Tooltip>
               <Avatar size="lg"
                    className="border-outline-0 border-2 bg-emerald-600" >
                      <AvatarFallbackText className="text-white">Sandeep Srivastva</AvatarFallbackText>
                </Avatar>
                   <Avatar size="lg"
                    className="border-outline-0 border-2 bg-cyan-600" >
                      <AvatarFallbackText className="text-white">Arjun Kapoor</AvatarFallbackText>
                </Avatar>
                      <Avatar size="lg"
                    className="border-outline-0 border-2 bg-indigo-600" >
                      <AvatarFallbackText className="text-white">Ritik Sharma </AvatarFallbackText>
                </Avatar>
              </AvatarGroup>
            </Box>
          );
        }
      `,
      transformCode: (code) => {
        return transformedCode(code, 'function', 'App');
      },
      scope: {
        Avatar,
        AvatarGroup,
        AvatarFallbackText,
        Wrapper,
        HStack,
        Tooltip,
        TooltipContent,
        TooltipText,
        Text,
        Box,
        Heading,
        VStack,
        Center,
      },
      argsType: {},
    }}
  />
</AppProvider>

#### Tooltip with Icon

A tooltip component with an icon is a user interface element that provides contextual information or explanatory text when the user hovers over or interacts with an icon.

<AppProvider>
  <CodePreview
    showComponentRenderer={true}
    showArgsController={false}
    metaData={{
      code: `
        function App(){
          return (
            <Box className="h-96 justify-center">
              <Tooltip
                  placement="top"
                  trigger={(triggerProps) => {
                    return (
                    <Avatar size="md" {...triggerProps} className="bg-primary-600">
                      <Icon as={EditIcon} size="sm" className="text-white"/>
                    </Avatar>
                    )
                  }}
              >
                <TooltipContent
                className="bg-background-50 rounded-md"
                >
                  <Box className="p-2.5">
                    <Text size="sm">New message</Text>
                    <HStack space="xs" className="p-1 ml-3">
                          <Avatar size="xs" className="bg-gray-500 rounded">
                              <Icon as={Command} className="text-typography-0"/>
                          </Avatar>
                          <Avatar size="xs" className="bg-gray-500 rounded">
                            <AvatarFallbackText>N</AvatarFallbackText>
                          </Avatar>
                    </HStack>
                  </Box>
                </TooltipContent>
              </Tooltip>
            </Box>
        );
        }
      `,
      transformCode: (code) => {
        return transformedCode(code, 'function', 'App');
      },
      scope: {
        Avatar,
        AvatarFallbackText,
        Wrapper,
        HStack,
        Tooltip,
        TooltipContent,
        TooltipText,
        Text,
        Box,
        Heading,
        EditIcon,
        Command,
        Icon,
      },
      argsType: {},
    }}
  />
</AppProvider>





